<template>
	<view class="stock-query-page">
		<view class="title t-m">气瓶总库存</view>
		<view class="c-flex total-stock-con">
			<view class="left-con c-panel c-flex c-flex-col c-item-center">
				<image :src="stockImgUrl +'gasbottle-icon.png'"></image>
				<view class="value">{{totalNum}}</view>
				<view class="name">总数（瓶）</view>
			</view>
			<view class="right-con c-flex c-flex-wrap c-flex-1">
				<view class="r-item c-panel" v-for="(item,i) in productList" :key="i">
					<view class="value">{{item.sumNum}}</view>
					<view class="name"><text class="icon"></text>{{item.productName}}</view>
				</view>
			</view>
		</view>
		<view class="c-flex jc-between t-m">
			<view class="title">各站点库存</view>
			<view class="site-sele c-flex c-item-center" @click="onSeleSite">
				{{site.name||'选择站点'}}
				<view class="arrow"></view>
			</view>
		</view>
		<view class="every-site-sotck">
			<scroll-view style="height:60vh;" scroll-y="true">
				<view class="list-item" v-for="(item,i) in siteStockList" :key="i">
					<view class="title-1 c-flex c-item-center">
						<image :src="stockImgUrl+'stock-manage-site.png'"></image>
						<text>{{item.tenantName}}</text>
					</view>
					<view class="p-list c-flex c-flex-wrap">
						<view class="p-l-item" v-for="(pitem,pi) in item.stockList" :key="pi">
							<view class="value">{{pitem.sumNum}}</view>
							<view class="name">{{pitem.productName}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<no-data v-if="siteStockList.length == 0" style="position: absolute;top: 50%;left: 18%;"></no-data>
		</view>
		<!-- 弹框 -->
		<uni-popup ref="type_popup" type="bottom" :custom="true" :mask-click="true"
							 background-color="rgba(0,0,0,0)" style="border-top-left-radius: 50rpx;" :safe-area="false">
			<view class="pop-content">
				<view class="header c-flex jc-between">
					<view @tap='sure(0)'>取消</view>
					<view @tap='sure(1)'>确定</view>
				</view>
				<view class="search-con c-flex jc-start c-item-center">
					<view class="input-con c-flex jc-start c-item-center">
						<image src="@/static/images/common/find-icon.png" style="width: 42rpx;max-height: 42rpx;"></image>
						<input class="uni-input" v-model="searchInfo" name="text" confirm-type="search" 
										placeholder="请输入名称..." @confirm="onInputChange" @input="onInputChange"/>
					</view>
				</view>
				<picker-view :indicator-style="indicatorStyle" :value="popValue" @change="onDataChange" 
										 @pickstart="pickstart" @pickend="pickend" class="tower_type">
					<picker-view-column >
						<view class="item c-flex c-item-center jc-center" v-for="(item,index) in popList" :key="index">
							{{item.name}}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>	
	</view>
</template>

<script>
	import NoData from '@/components/no-data/no-data.vue';
	export default {
		components:{NoData},
		data() {
			return {
				stockImgUrl: this.$API.IMG_URL + '/gas/yehuaqi/stock/',
				productList:[],//[{productName:'5kg',value:0},{productName:'10kg',value:0},{productName:'15kg',value:0},{productName:'50kg',value:0}],
				totalNum:0,
				siteStockList:[],
				tenants:[],
				popList:[],
				site:{id:'',name:''},
				popValue:'',
				indicatorStyle: `height: 50px;line-height:50px;`,
				popIndex:0,
				isMoving:false,
				searchInfo:''
			};
		},
		onLoad(options) {
			this.initStatistData();
			this.findTenantList();
		},
		methods:{
			initStatistData(){
				this.$API.findStockAllStatist({}).then(res=>{
					this.totalNum = res.data.totalNum;
					this.productList = res.data.stockList;
				})
			},
			//查询网点统计
			initStatistData_2(){
				uni.showLoading({});
				this.$API.findSiteAndProdStatist({queryType:3,tenantId:this.site.id}).then(res=>{
					uni.hideLoading();
					this.siteStockList = res.page.records;
				})
			},
			/**
			 * 查询液化气公司
			 */
			findTenantList(){
				this.$API.findTenants({appCode:'energy',appType:4,status:1}).then(res=>{
					this.tenants = res.list;
					this.tenants.unshift({id:'',name:'全部'})
					this.initStatistData_2();
				});
			},
			pickstart() {
				this.isMoving = true;
			},
			pickend() {
				this.isMoving = false;
			},
			/**
			 * 确定选择
			 * @param {Object} type
			 */
			sure(type){
				if (this.isMoving) {
						console.log('运动中，不能点击哦')
						return;
				}
				if(type==1){
						this.site = this.popList[this.popIndex];
						this.initStatistData_2();
				}
				this.$refs.type_popup.close();
			},
			//选择网点
			onSeleSite(){
				this.popIndex = 0;
				this.popList = [...this.tenants];
				this.$refs.type_popup.open();
			},
			//弹框选择
			onDataChange(e){
				this.popIndex = e.detail.value[0];
			},
			onInputChange(){
				if(this.searchInfo){
					this.popList = this.tenants.filter(item =>{return item.name.indexOf(this.searchInfo) != -1});
				}else{
					this.popList = [...this.tenants];
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import "@/static/css/custom-popup.scss";
.stock-query-page{
	padding:38rpx 24rpx;font-family: OPPOSans, OPPOSans;
	.t-m{margin-bottom:34rpx;}
	.title{
		font-weight: 600;font-size: 30rpx;color: #333333;position:relative;padding-left: 36rpx;
		&::after{
			content: '';display: inline-block;  position: absolute;    padding-left: 12rpx;
			width: 22rpx;height: 12rpx;background-image: linear-gradient(#F18858 10%, #E86547 50%);
			left: 8rpx;top: 8px;border-top-left-radius: 7rpx;border-bottom-right-radius: 7rpx;transform: rotate(-262deg);
		}
	}
	.arrow{
		width: 0;height: 0;border-top: 5px solid #8c8989; border-right: 4px solid transparent;border-left: 4px solid transparent;margin-left: 10rpx;
	}
	.c-panel{background: #FFFFFF;border-radius: 20rpx;padding:25rpx;}
	.site-sele{
		padding:12rpx 36rpx;border-radius: 30rpx;border: 2rpx solid #cccccc;margin-top:-8rpx;
		font-weight: 500;font-size: 24rpx;color: #000000;
	}
	.total-stock-con{
		gap:24rpx;margin-bottom:32rpx;
		.name{font-weight: 400;font-size: 24rpx;color: #333333;font-family: PingFangSC, PingFang SC;}
		.left-con{
			width:252rpx;text-align: center;
			image{width:76rpx;height:130rpx;}
			.value{font-weight: normal;font-size: 48rpx;color: #333333;}
		}
		.right-con{
			gap:23rpx;
			.value{font-weight: normal;font-size: 40rpx;color: #333333;}
			.r-item{flex-basis: 33%;text-align: center;}
			.icon{display: inline-block;border: 2px solid #E86647;width: 10rpx;height: 10rpx;border-radius: 50%;margin-right: 6rpx;}
		}
	}
	.every-site-sotck{
		font-family: PingFangSC, PingFang SC;
		.list-item{
			padding:36rpx 32rpx;background: #FFFFFF;border-radius: 16rpx;margin-bottom:25rpx;
			.title-1{
				font-weight: 600;font-size: 30rpx;color: #333333;margin-bottom:25rpx;
				image{width:26rpx;height:32rpx;margin-right:16rpx;}
			}
			.p-list{
				.p-l-item{
					flex-basis: 20%;
					.value{font-weight: 600;font-size: 28rpx;color: #333333;}
					.name{font-weight: 400;font-size: 24rpx;color: #9B9B9B;}
				}
			}
		}
	}
	
	
}
</style>
